<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
    <button @click="changePrice">修改汽车的价格</button>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="item in games" :key="item.idid">{{ item.name }}</li>
    </ul>
    <button @click="changeFirstGame">修改游戏名</button>
    <h2>测试：{{ object.a.b.c }}</h2>
    <button @click="changeObj">修改测试</button>
  </div>
</template>

<script setup name="Person">
import { reactive } from "vue";
//如果想要一个响应式对象，就用reactive将这个对象包裹
//reactive 只能定义响应式数据
let car = reactive({ brand: "奔驰", price: 100 });
let games = reactive([
  { id: "01", name: "王者荣耀" },
  { id: "02", name: "原神" },
  { id: "03", name: "黑神话悟空" },
]);

//reactive 对应的响应式对象是深层次的

let object = reactive({
  a: {
    b: {
      c: 666,
    },
  },
});

function changePrice() {
  car.price += 10;
}

function changeFirstGame() {
  games[0].name = "蛋仔派对";
}

function changeObj() {
  object.a.b.c = 888;
}
</script>

<style scoped>
.person {
  background-color: #c2e0f6;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>